<template>
  <div class="login">
    <div class="header">
      <div>
        <img src="../assets/images/aijiale-logo.png" alt="" />
        艾家乐设计管理平台
      </div>
      <div>你好，欢迎使用艾家乐设计管理平台</div>
    </div>
    <div class="main">
      <div class="form">
        <h2>账号登录</h2>
        <!-- <a href="#"> <img src="../assets/images/Code.png" alt="" /></a> -->
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          method="post"
          status-icon
          label-width="60px"
        >
          <img class="user" src="../assets/images/ico-user.png" alt="" />
          <el-form-item label="账号" prop="username">
            <el-input v-model.trim="form.username" placeholder="输入手机号" />
          </el-form-item>
          <img
            class="password"
            src="../assets/images/ico-password.png"
            alt=""
          />
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model.trim="form.password"
              show-password
              placeholder="输入密码"
            />
          </el-form-item>
          <el-form-item>
            <!-- <el-checkbox>十天免登录</el-checkbox>
            <div class="forget">
              <a href="#">忘记密码</a> |
              <a href="http://localhost:8080/#/register">注册</a>
            </div> -->
            <el-button @click="submit" class="denglu">登 录</el-button>
            <!-- <el-button type="danger" @click="$router.push('/register')"
              >注册</el-button
            > -->
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <div>
        <img src="../assets/images/C.png" alt="" />
        2021 艾登软件（上海）股份有限公司版权所有
      </div>
      <div>
        <img src="../assets/images/copyright.png" alt="" />
        ICP证：沪ICP备14033657号-3
      </div>
      <div>
        <img src="../assets/images/networkSecurity.png" alt="" />
        沪公网安备 31011502008722号
      </div>
    </div>
  </div>
</template>

<script>
// import md5 from "js-md5";
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: {
          required: true,
          validator: this.checkPhone,
          trigger: "blur",
        },
        password: { required: true, message: "请输入密码" },
      },
    };
  },
  methods: {
    // 登录手机验证
    checkPhone(rule, value, callback) {
      const me = this;
      if (!value) {
        // me.showTips = false
        callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/; // console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          me.showTips = false;
          return callback(new Error("请输入正确的手机号"));
        }
      }
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过发送登录验证请求
          this.$postHttp(
            `api3/mob/work?proname=LOGON&username=${this.form.username}&password=${this.form.password}`
          )
            .then((res) => {
              // console.log(res);
              if (res.result == "true") {
                this.$message.success("登录成功");
                console.log("登录成功", res.result);
                localStorage.setItem(
                  "userInfo",
                  JSON.stringify({
                    xm: res.session[0].XM,
                    agent: res.session[0].AGENT,
                    dwdm: res.session[0].DWDM,
                    sj: res.session[0].YHDM,
                  })
                );
                this.$postHttp(
                  `api3/mob/query?proname=JJ8012&yhdm=${res.session[0].YHDM}`
                ).then((res) => {
                  localStorage.setItem("bm",res.rows[0].bm);
                })
                localStorage.setItem("yhdm", res.session[0].YHDM);
                localStorage.setItem("dwdm", res.session[0].DWDM);
                localStorage.setItem("xm", res.session[0].XM);
                setTimeout(() => {
                  this.$router.push(
                    localStorage.getItem("default-active") || "app"
                  );
                }, 100);
              } else {
                this.$message.error(res.reason);
                // console.log("登录失败", res.result);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
  },

  // methods: {
  //   submit() {
  //     this.$refs.form.validate((valid) => {
  //       if (valid) {
  //         // 表单验证通过发送登录验证请求
  //         this.$http
  //           .post("admin/login", {
  //             username: this.form.username,
  //             password: md5(this.form.password),
  //           })
  //           .then((res) => {
  //             if (res.result.err > 0) {
  //               this.$message.error(res.result.msg);
  //             } else {
  //               this.$message.success(res.result.msg);
  //               this.$store.dispatch("GetAdminInfo", {
  //                 username: this.form.username,
  //               });
  //               setTimeout(() => {
  //                 this.$router.push(
  //                   localStorage.getItem("default-active") || "app"
  //                 );
  //               }, 100);
  //             }
  //           });
  //       }
  //     });
  //   },
  // },
  mounted() {
    // 当按下enter键 可以提交
    window.onkeydown = (ev) => {
      ev.keyCode === 13 && this.submit();
    };
  },
  destroyed() {
    // 销毁按下事件
    window.onkeydown = null;
  },
};
</script>

<style lang="less">
.login {
  display: flex;
  height: 100vh;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10%;
    margin-bottom: 7px;
    div:nth-child(1) {
      margin-left: 110px;
      font-size: 28px;
      font-weight: bold;
      color: #2e2e2c;
      img {
        vertical-align: middle;
      }
    }
    div:nth-child(2) {
      margin-right: 346px;
      font-size: 16px;
      font-weight: 400;
      color: #999999;
    }
  }
  .main {
    display: flex;
    position: relative;
    height: 80%;
    background: url(../assets/images/banner.png) no-repeat;
    background-size: 100% 100%;
    .form {
      position: absolute;
      margin: 0 auto;
      width: 21%;
      min-width: 321px;
      min-height: 375px;
      height: 59%;
      right: 20%;
      top: 20%;
      background: #ffffff;
      padding: 30px;
      box-shadow: 0px 0px 29px 0px rgba(3, 57, 99, 0.41);
      border-radius: 5px;
      .denglu {
        width: 100%;
        background-color: #00aa90;
        margin-top: 21%;
        height: 49px;
        font-size: 22px;
        font-weight: 400;
        color: #ffffff;
      }
      .user {
        position: absolute;
        left: 15px;
        top: 105px;
      }
      .password {
        position: absolute;
        left: 15px;
        top: 168px;
      }
      .forget {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
      }

      h2 {
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        text-align: center;
        margin-bottom: 41px;
      }
      img {
        position: absolute;
        top: 11px;
        right: 10px;
      }
    }
  }
  .footer {
    display: flex;
    align-items: center;
    height: 10%;
    margin: 0 auto;
    div:nth-child(1) {
      margin-right: 21px;
      img {
        vertical-align: -1px;
      }
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }
    div:nth-child(2) {
      margin-right: 21px;
      img {
        vertical-align: -1px;
      }
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }
    div:nth-child(3) {
      img {
        vertical-align: -1px;
      }
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }
  }
}
</style>
